<template>
  <TodoHeader />
  <TodoList>
    <draggable v-model="todos" item-key="id" animation="300">
      <template #item="{ element }">
        <TodoItem v-bind="element"></TodoItem>
      </template>
    </draggable>
  </TodoList>
  <TodoFooter />
</template>

<script setup>
import TodoHeader from './components/TodoHeader.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'
import TodoItem from './components/TodoItem.vue'

import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'

import draggable from 'vuedraggable'

import { useTodosStore } from './store/todos'

const { todos } = storeToRefs(useTodosStore())
const { getTodos } = useTodosStore()

onMounted(() => {
  getTodos()
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
